import React, { useState } from 'react'
import style from './Left.module.scss'
import { Button, Form, Modal, } from 'antd'
import { pushQuestion, sortQuestion } from '../../../../store/models/questions';
import { useSelector, useDispatch } from 'react-redux'
import type { RootState } from '../../../../store/index'
import { Provider } from '../../../../hooks/useForm';
import DragCard from '../dragCard/DragCard'; 

import {
  DndContext, 
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
} from '@dnd-kit/core';
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable';


const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};


const Left:React.FC = () => {

  const questionList = useSelector((state:RootState) => state.questions.questions)
  const [form] = Form.useForm()
  // console.log(questionList)
  const dispatch = useDispatch()

  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const sensors = useSensors(
    useSensor(PointerSensor,{
      activationConstraint: {
        distance: 5
      }
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  const handleDragEnd = (event:any) => {
    const {active, over} = event;
    
    if (active.id !== over.id) {
      // console.log(active.id , over.id)
      const oldIndex = questionList.findIndex(it => it.id === active.id);
      const newIndex = questionList.findIndex(it => it.id === over.id);
      const newIndexList =  arrayMove(questionList, oldIndex, newIndex);
      // console.log(newIndexList)
      dispatch(sortQuestion(newIndexList))
    }
    
  }


  return (
    <Provider value={form}>
      <div className={style.left}>
        <Form
          form={form}
          onFinish={values => {
            console.log(values)
            dispatch(pushQuestion(values))
            setIsModalOpen(true);
          }}
          style={{ maxWidth: 600 }}
          {...formItemLayout }
          initialValues={{ 
            single: [],
            multiple: []
          }}
          autoComplete="off"
          >
            {/* 头部标题 */}
            <DndContext 
              sensors={sensors}
              collisionDetection={closestCenter}
              onDragEnd={handleDragEnd}
            >
              <SortableContext 
                items={questionList}
                strategy={verticalListSortingStrategy}
              >
                {questionList.map((item,index) =>{
                  return <DragCard key={item.id} cardItem={item} cardIndex={index}/>
                })}
              </SortableContext>
            </DndContext>
          {/* 提交按钮 */}
          <Form.Item>
            <Button type="primary" onClick={() => form.submit()}>提交</Button>
          </Form.Item>

        </Form>
      </div>
          

      {/* 点击  弹窗 */}
      <Modal width={1000} title="预览试卷" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        {questionList.map(item => 
          <div key={item.id}>
            <h3>{item.title}</h3>
            {item.list.map((it,index) =>
              <div key={it.question}>
                <h4>{index + 1},{it.question}</h4>
                {it.options &&
                  <ul>
                    {it.options.map((op,i) =>
                      <li key={i}>{op}</li>
                    )}
                  </ul>
                }
              </div>
            )}
          </div>
        )}
      </Modal>
    </Provider>
  )
}

export default Left


{/* // {questionList.map(item => 
//   <div key={item.id} style={{ border: '1px solid', padding: 20 }}>
//     <h2>{item.title}</h2>
//     <div>
//       {item.list.map((it,index) => {
//         return (
//           <div key={it.qid} style={{ border: '1px dashed', padding: 20 }}>
//            {renderQuestion(it,index ,item.type)}
//           </div>
//         )
//       })}
//     </div>
//   </div> */}
